<template>
	<view class="tabbar_pages">
		<view class="uni-tabbar">
			<view class="tababr_item tabbar_find" v-for="(item,index) in tabbarList" :key="index"
				@click="tabbarSave(item,index)">
				<view class="tabbar_icon" v-if="item.type == 0">
					<image :src="item.icon_select" class="select_img" mode="" v-if="item.pagePath == pagePath"></image>
					<image :src="item.icon" mode="" v-else></image>
				</view>
				<view class="find_icon" v-if="item.type == 1">
					<view class="icon">
						<image :src="item.icon_select" class="select_img" mode="" v-if="item.pagePath == pagePath">
						</image>
						<image :src="item.icon" mode="" v-else></image>
					</view>
				</view>
				<view class="tababr_text" :class="item.pagePath == pagePath?'textActive':''">{{item.text}}</view>
				<view class="tag" v-if="isShowNums && item.nums > 0">{{item.nums}}</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		props: { 
			isShowNums: {
				default: true,
				type: Boolean
			},
			pagePath:{
				default:'',
				type:String
			}
		},
		data() {
			return {
				page: '',
				isRouterShow: true,
				tabbarList: [{
						"pagePath": "pages/seach/seach",
						"text": "找校友",
						"icon_select": "../../static/tabbar/seach_active.png",
						"icon": "../../static/tabbar/seach.png",
						"type": 0,
						"nums": 0
					},
					{
						"pagePath": "pages/help/help",
						"text": "互助",
						"icon_select": "../../static/tabbar/help_active.png",
						"icon": "../../static/tabbar/help.png",
						"type": 0,
						"nums": 0
					},
					{
						"pagePath": "pages/home/home",
						"text": "首页大厅",
						"icon_select": "../../static/tabbar/home_active2.png",
						"icon": "../../static/tabbar/home.png",
						"type": 1,
						"nums": 0
					},
					{
						"pagePath": "pages/activity/activity",
						"text": "活动",
						"icon_select": "../../static/tabbar/activity_active.png",
						"icon": "../../static/tabbar/activity.png",
						"type": 0,
						"nums": 0
					},
					{
						"pagePath": "pages/my/my_index",
						"text": "我的",
						"icon_select": "../../static/tabbar/my_active.png",
						"icon": "../../static/tabbar/my.png",
						"type": 0,
						"nums": 0
					}
				]
			};
		},
		created() { 
			//您的判断逻辑isRouterShow
			if (this.isRouterShow == false) { 
				this.tabbarList.splice(2,1)
				uni.setTabBarItem({
					index: 1, // tabBar 的哪一项，从左边算起
					visible: false // 该项是否显示
				})
			}
		},
		methods: {
			tabbarSave(e, index) {
				this.page = e.pagePath
				uni.switchTab({
					url: '/' + e.pagePath
				});
			},
		}
	}
</script>


<style lang="scss">
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 100upx;
		height: calc(100upx + env(safe-area-inset-bottom)) !important;
		padding-bottom: calc(env(safe-area-inset-bottom)) !important;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 5px 0px 5px 5px rgba(206, 206, 206, 0.32);

		.tabbar_find {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.find_icon {
				width: 60px;
				height: 55px;
				margin-top: -30px;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				box-shadow: 0px 0px -17rpx 1rpx rgba(206, 206, 206, 0.32);

				.icon {
					/* background-color: #3668FC; */
					width: 42px;
					height: 42px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 28px;
						height: 28px;
					}

					.select_img {
						animation: tabbar-item-button-click 0.2s forwards 1 !important;
					}
				}
			}
		}

		.tababr_item {
			font-size: 20rpx;
			text-align: center;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.tag {
				position: absolute;
				right: 20px;
				top: 5px;
				padding: 4rpx;
				width: 12px;
				height: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: red;
				font-size: 24rpx;
				border-radius: 50%;
				color: #fff;
			}

			.tabbar_icon {
				height: 25px;
				width: 25px;

				.select_img {
					animation: tabbar-item-button-click 0.2s forwards 1;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tababr_text {
				line-height: 24rpx;
				font-size: 24rpx;
				margin-top: 2px;
				color: #999;
			}
			.textActive{
				color: #193867;
			}
		}
	}

	/* 点击动画 start */

	@keyframes tabbar-item-button-click {
		from {
			transform: scale(0.5);
		}

		to {
			transform: scale(1);
		}
	}
</style>
